<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jquery 基本知识点复习</title>
</head>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
  // 原生js的入口函数
  // window.onload = function name(params) {
    
  // };

  // // jquery 的入口函数
  // $(document).ready = function name(params) {
    
  // };

  // $(function() {
  //   // $('div').attr('class','8888');
  //   // $('div').attr('name','9999');
  //   // $('div').prop('class','111111');
  //   $('div').removeAttr('name');
  //   // $('div').html('我是测试的');
  //   $('div').text('我是测试的***********');
  // });

  // $(function(){
  //   $('.btn').click(function(){
  //     var url = $('.inp').val();
  //     var strVar = "";
  //     strVar += " <img class=\"img\" src=\""+url+"\">";
  //     $('.tets1').append(strVar);
  //   });
  // });




$(function(){
  $('.btn').click(function(){
    var url = $('.inp').val();
    var strVar = "";
    strVar += "<img class=\"img\" src=\""+url+"\">";
    $('.add').append(strVar);
    $('.box1').css(
      {
        'color':'blue',
        'fontSize':'100px',
        'background':'#eee',
        'width':'200px',
        'height':'200px'
      }
    );
  });
});









</script>
<body>
  <!-- <div class="mian" name="测试相关">我是测试复习内容</div> -->
  <!-- <input class="inp" type="text">
  <button class="btn">添加图片</button>
  <div class="tets1"></div> -->


<input class="inp" type="text">
<button class="btn">添加图片</button>
<p class="add"></p>
<div class="box1"></div>












 
</body>

<style>
  .img{
    width: 100px;
    height: 100px;
    border-radius: 50px;
  }
</style>
</html>